<template>
  <section class="test">
    <h3>时钟</h3>
    <div class="time_clock">
      此处显示时钟
    </div>
    <h3>柱状图展示</h3>
    <div class="view_post">

      <!-- 底部栏 -->
      <div class="view_bottom"></div>
    </div>
    <h3>饼状图</h3>
     <div class="view_post">

      <!-- 底部栏 -->
      <div class="view_bottom"></div>
    </div>
      <div>到底了，没有了~~</div>
  </section>
</template>

<script>
export default {
  data(){
    return{

    }
  }
}
</script>

<style lang="scss">
.test{
  background: rgb(136, 228, 231);
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  h3{
    text-align: center;
  }
  .time_clock{
    border: cornsilk solid 1px;
    text-align: center;
  }
  .view_post{
    position: relative;
    width: 300px;
    height: 310px;
    &::before{
      position: absolute;
      content: '';
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after{
      position: absolute;
      content: '';
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    .view_bottom{
      position: absolute;
      bottom: 10px;
      width: 100%;
      &::before{
        position: absolute;
        content: '';
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after{
        position: absolute;
        content: '';
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
}
  
</style>